<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ msg }}
  <!-- 表单元素 input checkbox textarea select radio -->
  <!-- vue 的指令 directive 只有dom上的行间属性 vue给这类属性赋予一定的意义 来实现特殊的功能 使用的指令都是 v- 开头的 -->
  <!-- v-model 双向数据绑定 -->
  <input type="text" v-model="msg">
  <!-- Object.defineProperty-->
  <div v-test="msg"></div>
  <!--  v-once  只绑定第一次， 当数据再次变化时不发送变化 -->
  <div v-once>
      {{msg}} {{msg}}
  </div>
  <div v-html="p"></div>
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
   let vm =  new Vue({
        el: '#app',
            data:{
                msg:'hello!',
                p:`<h1>hello</h1>`
            }
    })
</script>
</html>
